F/A-18系列

F/A-18

这是什么？

这是一个以 F/A-18 系列战机为主题的数据可视化项目。通过大画幅视觉与滚动动效讲述机型差异、武器挂载与全球部署；用户可在地图与数据表之间联动检索，快速获得信息。

数据梳理

在做 F/A-18 资料梳理时，我发现公开信息高度分散在百科、新闻、论坛、采购通告与图集之间；命名与口径混用，“在役 / 退役 / 损毁 ”常被混写；缺少统一字段与可交互对比，地图与清单不联动，也难以按国家 / 机型 / 时间快速筛选。因此，我的方向是用统一数据模型与交互可视化，把零散信息转成可探索的视图，为“查找—比较—追踪”提供一条清晰路径。

数据梳理期相关插图
目标用户相关示意图

目标用户

航空/军事迷社群：想快速对比型号差异与各国装备情况。
模拟飞行与资料编辑者：需要统一口径的挂载与部署数据。
科普/教育创作者：用于课程、文章与视频的交互式演示与截图。

Persona

这是一个以 F/A-18 系列战机为主题的数据可视化网站，通过图像与交互展示型号特性、武器挂载和全球部署，让用户轻松直观地了解信息。

方法一：信息架构与数据建模示意
Persona A
方法二：交互原型与可用性验证
Persona B
方法三：可视化系统与设计规范
Persona C

COLOUR

颜色

  • #FFB84AR:255 G:184 B:074
  • #1C498AR:028 G:073 B:138
  • #B31942R:179 G:025 B:066
  • #FFFFFFR:255 G:255 B:255
  • #0F141CR:015 G:020 B:028

主配色沿用 F/A-18 的蓝黄涂装；蓝/白/红呼应美国国徽。深蓝用于图例与表格，黄/红作为强调色；白色保证正文字体的可读对比度。

TYPOGRAPHY

字体

字体清单与示例（图片）

标题采用 Russo One，正文为无衬线与衬线的合理搭配；若未加载 Web Font，将回退到系统字体，保持可读性。

第二阶段示意图
阶段图片

原型
开发&迭代

第二阶段

标题更统一、定字重，完成斜切排版与分层视觉。武器区改为俯视一致分组，统一标注间距；主机体枚举并做优先裁切。部署地图产出多版，制定国家级与分区规范，准备后续联动。

代码工作

最终我把方案收敛为一张统一页面：先将内容拆成多个模块，逐一完成代码与动效；数据可视化由最初的 SVG 方案转为 JavaScript + ECharts，实现图表与地图的悬停提示、筛选与缩放。 地图与表格彼此呼应，悬停或选择即可联动高亮并触发细节动效；整体在深色界面下保持清晰与流畅。 收尾阶段引入 AI 辅助进行 bug 定位与修复，以及样式与数据的整合，完成统一页面的交付。